<template>
  <div class="index-container">
    <el-row :gutter="20">
      <div class="container-item">
        <div></div>
        <span>基本数据</span>
      </div>
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
          <div class="container-one">
            <div>
              学生数量
            </div>
            <div style="font-size: 50px;margin-top: 10px">
              {{ dataObj ? dataObj.stu : '---' }}
            </div>
          </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
        <div class="container-one" style="background-color: #ffb74c">
          <div>
            试题总数
          </div>
          <div style="font-size: 50px;margin-top: 10px">
            {{ dataObj ? dataObj.topic : '---' }}
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
        <div class="container-one" style="background-color: #67ace7">
          <div>
            试卷总数
          </div>
          <div style="font-size: 50px;margin-top: 10px">
            {{ dataObj ? dataObj.paper : '---' }}
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
        <div class="container-one" style="background-color: #4cb5ab">
          <div>
            考试总数
          </div>
          <div style="font-size: 50px;margin-top: 10px">
            {{ dataObj ? dataObj.exam : '---' }}
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <div class="container-item">
        <div></div>
        <span>快速入口</span>
      </div>
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
        <div class="container-two">
          <el-card shadow="hover">
            <div @click="toPage(1)" style="display: flex;align-items: center;justify-content: center">
              <div>
                <img style="height: 100px;width: 100px" src="../../assets/addUser.png" alt="">
              </div>
              <div style="font-size: 20px;margin-top: 10px;font-weight: bold;margin-left: 20px">
                添加人员
              </div>
            </div>
          </el-card>

        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
        <div class="container-two">
          <el-card shadow="hover">
            <div @click="toPage(2)" style="display: flex;align-items: center;justify-content: center">
              <div>
                <img style="height: 100px;width: 100px" src="../../assets/addtopic.png" alt="">
              </div>
              <div style="font-size: 20px;margin-top: 10px;font-weight: bold;margin-left: 20px">
                添加试题
              </div>
            </div>
          </el-card>

        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
        <div class="container-two">
          <el-card shadow="hover">
            <div @click="toPage(3)" style="display: flex;align-items: center;justify-content: center">
              <div>
                <img style="height: 100px;width: 100px" src="../../assets/addPaper.png" alt="">
              </div>
              <div style="font-size: 20px;margin-top: 10px;font-weight: bold;margin-left: 20px">
                建立试卷
              </div>
            </div>
          </el-card>

        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
        <div class="container-two">
          <el-card shadow="hover">
            <div @click="toPage(4)" style="display: flex;align-items: center;justify-content: center">
              <div>
                <img style="height: 100px;width: 100px" src="../../assets/sendExam.png" alt="">
              </div>
              <div style="font-size: 20px;margin-top: 10px;font-weight: bold;margin-left: 20px">
                发布考试
              </div>
            </div>
          </el-card>

        </div>
      </el-col>


      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card shadow="hover">
         <div id="echarts" style="height: 200px">

         </div>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
const echarts = require('echarts/lib/echarts');
require('echarts/lib/component/graphic');
export default {
  name: "Index",
  components: {},
  data() {
    return {
      dataObj:null,
      nodeEnv: process.env.NODE_ENV
    };
  },
  created() {
    this.getDataList();
  },
  mounted() {
    let chartDom = document.getElementById('echarts');
    let myChart = echarts.init(chartDom);
    let
    option = {
      graphic: {
        elements: [
          {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
              text: '欢迎来到自学考试学习管理平台',
              fontSize: 80,
              fontWeight: 'bold',
              lineDash: [0, 200],
              lineDashOffset: 0,
              fill: 'transparent',
              stroke: '#000',
              lineWidth: 1
            },
            keyframeAnimation: {
              duration: 6000,
              loop: true,
              keyframes: [
                {
                  percent: 0.7,
                  style: {
                    fill: 'transparent',
                    lineDashOffset: 200,
                    lineDash: [200, 0]
                  }
                },
                {
                  // Stop for a while.
                  percent: 0.8,
                  style: {
                    fill: 'transparent'
                  }
                },
                {
                  percent: 1,
                  style: {
                    fill: 'black'
                  }
                }
              ]
            }
          }
        ]
      }
    };

    myChart.setOption(option);


  },
  methods: {



    getDataList: function () {
      this.$store
        .dispatch("admin/getIndexData")
        .then((res) => {
          const { data } = res;
          this.dataObj = data;
        });
    },

    toPage:function (index){
      if(index === 1){
        this.$router.push("/office/student");
        console.log(111)
      }else if (index === 2){
        this.$router.push("/exam/questions");
      }else if (index === 3){
        this.$router.push("/exam/paper");
      }else if (index === 4){
        this.$router.push("/exam");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.index-container {
  .container-item{
    :nth-child(1){
      height: 20px;
      width: 5px;
      background-color: #3a8ee6;
    }
    :nth-child(2){
      font-size: 18px;
      font-weight: bold;
      margin-left: 20px;
    }
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-bottom: 10px;
  }
 .container-one{
   margin-bottom: 10px;
   width: 100%;
   background-color: #ed6065;
   color: white;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   font-weight: bold;
    height: 200px;
    display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
 }
  .container-two{

  }
}
</style>
